{% extends 'article/base.html' %}
{% load static %}
{% load article_tags %}
{% block title %} article detail{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}">
{% endblock %}
{% block content %}
    {% with total_likes=article.users_like.count users_like=article.users_like.all %}
        <div class="container">
            <div class="col-md-9">
                <header>
                    <h1>{{ article.title }}</h1>
                    <p>
                        <a href="{% url 'article:author_article' article.author.username %}">{{ user.username }}</a>
                        <span style="margin-left: 20px;" class="glyphicon glyphicon-thumbs-up">
                    {{ total_likes }}like {{ total_likes|pluralize }}
                </span>
                    </p>
                </header>

                <div id="editormd-view">
            <textarea id="append-test" style="display:none;">
                {{ article.body }}
            </textarea>
                </div>
                <div>
                    <p class="text-center">
                        <a onclick="like_article({{ article.id }},'like')" href="#">
                            <span class="glyphicon glyphicon-thumbs-up">like</span>
                        </a>
                        <a onclick="like_article({{ article.id }},'unlike')" href="#">
                    <span style="margin-left: 15px;" class="glyphicon glyphicon-thumbs-down">
                        unlike
                    </span>
                        </a>
                    </p>
                </div>
                <div>
                    <p class="text-center"><strong>点赞本文的读者</strong></p>
                    {% for user in article.users_like.all %}
                        <p class="text-center">{{ user.username }}</p>
                    {% empty %}
                        <p class="text-center">还没有人对此文章表态</p>
                    {% endfor %}
                </div>
                <hr>
                <div>
                    <h3><span class="glyphicon glyphicon-bullhorn"></span>本文有{{ article.comments.count }} 评论</h3>
                    {% for comment in article.comments.all %}
                        <div>
                            <p><strong>{{ comment.commentator }}</strong>说：</p>
                            <p style="margin-left: 40px;">{{ comment.body }}</p>
                        </div>
                    {% empty %}
                        <p>没有评论</p>
                    {% endfor %}
                    <h3><span class="glyphicon glyphicon-send"></span>看文章，发评论，不要沉默 </h3>
                    <form action="." method="post" class="form-horizontal" role="form">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">评论员</label>
                            <div class="col-sm-10">
                                {{ comment_form.commentator }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">评论</label>
                            <div class="col-sm-10">
                                {{ comment_form.body }}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <p><input type="submit" name="" value="发评论" class="btn btn-primary"></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-3">
                <p class="text-center"><h3>最受欢迎文章</h3></p>
                <ol>
{#                    {% for article_rank in most_viewed %}#}
{#                        <li>#}
{#                            <a href="{{ article_rank.get_url_path }}">{{ article_rank.title }}</a>#}
{#                        </li>#}
{#                    {% endfor %}#}

                </ol>
                <p class="text-center"><h3>最新文章</h3></p>
                {% latest_articles 4 %}
            </div>
        </div>
    {% endwith %}
{% endblock %}

{% block javascript %}
    <script src="{% static 'editor/lib/marked.min.js' %}"></script>
    <script src="{% static 'editor/lib/prettify.min.js' %}"></script>
    <script src="{% static 'editor/lib/raphael.min.js' %}"></script>
    <script src="{% static 'editor/lib/underscore.min.js' %}"></script>
    <script src="{% static 'editor/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'editor/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'editor/lib/jquery.flowchart.min.js' %}"></script>
    <script src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            editormd.markdownToHTML("editormd-view", {
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tex: true,
                flowChart: true,
                sequenceDiagram: true,
            })
        })

        function like_article(id, action) {
            $.ajax({
                url: "{% url 'article:like_article' %}",
                type: 'POST',
                data: {"id": id, "action": action},
                success: function (e) {
                    if (e == "1") {
                        layer.msg("感谢点赞");
                        window.location.reload();
                    } else {
                        layer.msg("我会继续努力");
                        window.location.reload();
                    }
                }
            })
        }
    </script>
{% endblock %}